﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>完整demo</title>

    <!--引入Jquery-->
    <script src="../src/lib/jquery.js"></script>
    <!--引入Css-->
    <link href="../src/lib/webuploader/webuploader.css" rel="stylesheet" />
    <!--引入Js-->
    <script src="../src/lib/webuploader/webuploader.js"></script>

    <script src="src/components/layer/layer.js"></script>
       
    <style>

        .webuploader-container {
            text-align:center;
       
        }
        .webuploader-pick {
            padding:15px 30px;
            letter-spacing:10px;
            margin-top:40px;
        }

    </style>

</head>

<body>

    <div id="app">

        <div id="fileList"></div>
        <!--这是存放图片的容器-->
        <div class="cp_img_jia" id="filePicker">上传</div>
        <!--这是上传按钮-->
    </div>

    <script type="text/javascript">
        var applicationPath = ""

        var $ = jQuery,
            $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,
            // 缩略图大小
            thumbnailWidth = 90 * ratio,
            thumbnailHeight = 90 * ratio,
            // Web Uploader实例
            uploader;


        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: applicationPath + 'web/src/lib/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '../../Tools/UpLoadProcess',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            //只允许选择图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png' //修改这行
            }
        });



        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function(file, response) {
            console.log(response.filePath);
            layer.alert('上传成功')
        });



        //开始上传
        $("#ctlBtn").click(function() {
            uploader.upload();
        });
    </script>

</body>

</html>